<template>
    <div>
        <header-one></header-one>
                        <el-button type="primary" icon="el-icon-d-arrow-left" @click="handleReturn"
                                   style="margin-top: 5px;margin-left: 5px;margin-bottom: 5px">返回主页
                        </el-button>
        <div class="container">
            <div style="margin-bottom: 5px">患者列表</div>
            <div>
                <div class="handle-box">
                    <el-input v-model="query.ptNm" placeholder="姓名" class="handle-input mr10" @keyup.enter.native="handleSearch" style="width: 200px"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch" style="margin-left: 30px">搜索</el-button>
                    <el-button type="el-button" icon="el-icon-delete" @click="handleReset">重置</el-button>
                    <el-button type="primary" icon="el-icon-plus" style="margin-left: 50px" @click="handleAdd">新增</el-button>
                </div>
                <el-table
                        :data="tableData"
                        height="300px"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                >
                    <el-table-column prop="ptId" label="患者ID" align="center" ></el-table-column>
                    <el-table-column prop="ptNm" label="姓名" align="center"  ></el-table-column>
                    <el-table-column prop="ptSexText" label="性别" align="center"  ></el-table-column>
                    <el-table-column prop="ptAge" label="年龄" align="center" ></el-table-column>
                    <el-table-column prop="ptBirth" label="出生日期"  align="center"></el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    icon="el-icon-thumb"
                                    @click="goTrain(scope.$index, scope.row)"
                            >前往训练
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :current-page="query.pageIndex"
                            :page-size="query.pageSize"
                            :total="pageTotal"
                            @current-change="handlePageChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <!-- 新增弹出框 -->
        <el-dialog title="设置训练信息" :visible.sync="setVisible" width="50%"  :before-close="closeAdd">
            <el-form ref="setForm" :rules="setFormRules" :model="setForm" label-width="140px">
                <el-form-item label="痉挛控制等级:" prop="spLowerConLevel">
                    <el-input type="number" v-model="setForm.spLowerConLevel"  :min="1" :max="20" style="width: 60%" @keyup.native="proving1"></el-input>(1-20)
                </el-form-item>
                <el-form-item label="训练时间:" prop="trainingDuration">
                    <el-button style="font-size: 16px;" plain type="success" @click="downTime()"
                               :disabled="isDownTime">-
                    </el-button>
                    <el-input readonly style="width: 20%; margin-left: 5px;" v-model="setForm.trainingDuration">{{setForm.trainingDuration}}
                    </el-input>
                    <el-button type="success" plain style="font-size: 16px; margin-left: 5px;"
                               @click="upTime()" :disabled="isAddTime">+
                    </el-button>&nbsp;分钟
                   <!-- <el-input type="number" v-model="setForm.trainingDuration" style="width: 60%" @keyup.native="proving1" :min="1" :max="100"></el-input>分钟-->
                </el-form-item>
                <el-form-item label="训练方向间隔时间:" prop="spaceTime">
                    <el-select v-model="setForm.spaceTime"  style="width: 60%">
                        <el-option key="00" label="10分钟" value="00"></el-option>
                        <el-option key="01" label="15分钟" value="01"></el-option>
                        <el-option key="02" label="20分钟" value="02"></el-option>
                        <el-option key="03" label="关闭定时反向" value="03"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAdd">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import {getPatientList} from '../api/patient';
    import {doAdd} from "../api/train";
    export default {
        name: 'patient',
        data() {
            return {
                query: {
                    ptNm: '',
                    pageIndex: 1,
                    pageSize: 4
                },
                tableData: [],
                pageTotal: 0,
                setVisible:false,
                isAddTime: false,
                isDownTime: true,
                setForm:{
                    trainingBody:"01",
                    spLowerConLevel:1,
                    trainingDuration:5,
                    spaceTime:'03'
                },
                setFormRules:{
                    spLowerConLevel: [
                        { required: true, message: '请输入痉挛控制等级', trigger: 'blur' }
                    ],
                    trainingDuration: [
                        { required: true, message: '请输入训练时间', trigger: 'blur' }
                    ],
                    spaceTime: [
                        { required: true, message: '请设置训练方向间隔时间', trigger: 'blur' }
                    ],
                },
            }
        },
        created() {
            this.getData();
        },
        methods:{
            // 获取后台数据
            getData() {
                getPatientList(this.query).then(res => {
                    if (res.success === true){
                        this.tableData = res.data;
                        this.pageTotal = res.total;
                    } else {
                        this.$message.error("查询失败！");
                        this.tableData = [];
                        this.pageTotal = 0;
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                console.log("1111",this.query);
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 触发重置按钮
            handleReset() {
                this.query.ptNm = "";
                this.getData();
            },
            handleReturn(){
                this.$router.push('/main');
            },
            handleAdd(){
                this.$router.push('/patientAdd');
            },
            goTrain(i,row){
                localStorage.setItem('ptNm', row.ptNm);
                localStorage.setItem('ptId', row.ptId);
                this.setVisible=true;
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            },
            /*新增*/
            saveAdd(){
                this.$refs['setForm'].validate((valid) => {
                    if (valid) {
                        //新增form表单提交到后台
                        this.setForm.ptId=localStorage.getItem("ptId");
                        console.log("---setForm",this.setForm);
                        this.setVisible=false;
                        localStorage.setItem('spaceTime', this.setForm.spaceTime);
                        this.$message.success('设置成功');
                        this.$router.push({
                            path: '/train',
                            query: this.setForm
                        });
                    }
                });
            },
            closeAdd(){//关闭新增弹出框
                this.$confirm('确认关闭？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.setVisible=false;
                        this.setForm={
                            trainingBody:"01",
                            spLowerConLevel:1,
                            trainingDuration:5,
                            spaceTime:'03'
                        };
                    })
                    .catch(() => {
                        this.$message({
                            message:'已取消操作'
                        });
                    });
            },
            /* 训练时间+*/
            upTime() {
                let time=this.setForm.trainingDuration;
                if (time < 100 && time > 5) {
                    // + 可以 -都不可再次点击
                    this.isAddTime = false;
                    this.isDownTime = false;
                    time = time + 5;
                    if (time==100){
                        this.isAddTime = true;
                    }
                }else if (time==100) {
                    // - 可以 +都不可再次点击
                    this.isDownTime = false;
                    this.isAddTime = true;
                }else { // 等于5
                    // + 可以 -都不可再次点击
                    this.isAddTime = false;
                    this.isDownTime = true;
                    time = time + 5;
                    if (time==10){
                        this.isDownTime = false;
                    }
                }
                this.setForm.trainingDuration=time;
            },
            /* 训练时间--*/
            downTime() {
                let time=this.setForm.trainingDuration;
                if (time < 100 && time > 5) {
                    // + 可以 -都不可再次点击
                    this.isAddTime = false;
                    this.isDownTime = false;
                    time = time - 5;
                    if (time==5){
                        this.isDownTime = true;
                    }
                }else if (time==100) {
                    // - 可以 +都不可再次点击
                    this.isDownTime = false;
                    this.isAddTime = true;
                    time = time - 5;
                    if (time==95){
                        this. isAddTime= false;
                    }
                }else { // 等于5
                    // + 可以 -都不可再次点击
                    this.isAddTime = false;
                    this.isDownTime = true;
                }
                this.setForm.trainingDuration=time;
            },
            proving1(e) {
                var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
                var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
                if (keynum ==189|| keynum==190||keynum == 109 || keynum == 110) {
                    this.$message.warning('禁止输入小数以及负数');
                    e.target.value = ' ';
                    return;
                }
                if (keynum==69){
                    this.$message.warning('禁止输入e或E');
                    e.target.value = ' ';
                    return;
                }
            },
        }
    }
</script>
<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
</style>
